<template>
  <view class="container">
    <view class="content">
      <view class="xjs-pt-40 xjs-ml-32">
        <view class="xjs-weight-bold xjs-size-32">{{ orderInfo.goodsName }}</view>
        <view class="num_text">
          <view>服务天数：{{ orderInfo.serviceDays }}</view>
          <view class="xjs-ml-24 xjs-mr-24">|</view>
          <view>宠物数量：{{ orderInfo.petNum }}</view>
        </view>
      </view>
      <view class="xjs-mt-40 xjs-ml-32">
        <view class="xjs-weight-bold xjs-size-32">服务评价</view>
        <view class="evaluate_text">请您对陪宠师的服务进行评价，300字以内。</view>
        <textarea v-model="evaluateInfo.content" maxlength="300" class="textarea" placeholder="输入评价"></textarea>
        <view class="lf lf-center xjs-pt-42" @click="changeAnonymous()">
          <image class="act_img"
                 :src="evaluateInfo.ifAnonymous==1?'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-12.png':'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-13.png'"></image>
          <view class="xjs-ml-16">匿名评价</view>
        </view>
      </view>

    </view>
    <view :class="['xjs-btn-primary',!(evaluateInfo.content)?'xjs-btn-disabled':'','btn_box']" @click="handelSubmit()">
      提交
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import api from '@/api/index'
import {useUserStoreToRefs} from '@/store/useUserStore'

const {userInfo} = useUserStoreToRefs()

let orderInfo = reactive({
  id: '',
  userId: '',
  goodsName: '',
  serviceDays: '',
  petNum: '',
  studioId: ''
});
let evaluateInfo = reactive({
  ifAnonymous: 1,
  content: '',
})
const changeAnonymous = () => {
  if (evaluateInfo.ifAnonymous == 1) {
    evaluateInfo.ifAnonymous = 0
  } else {
    evaluateInfo.ifAnonymous = 1
  }
}
// 提交
const handelSubmit = async () => {
  uni.showLoading({
    title: '提交中',
    mask: true
  })
  const res = await api({
    method: 'post',
    contentType: 'json',
    url: `/mall/order/assess/submitAssess`,
    data: {
      orderId: orderInfo.id,
      userId: orderInfo.userId,
      studioId: orderInfo.studioId,
      content: evaluateInfo.content,
      ifAnonymous: evaluateInfo.ifAnonymous,
    }
  })
  if (res.code === 0) {
    uni.showToast({
      title: '提交成功',
      icon: 'none',
    });
    uni.navigateBack()
  }
  uni.hideLoading()
}
onLoad(async (options) => {
  orderInfo.id = options.id;
  orderInfo.userId = options.userId;
  orderInfo.studioId = options.studioId;
  orderInfo.goodsName = options.goodsName;
  orderInfo.serviceDays = options.serviceDays;
  orderInfo.petNum = options.petNum;
})
</script>

<style lang="scss" scoped>
.lf {
  display: flex;
}

.lf-between {
  justify-content: space-between;
}

.lf-center {
  align-items: center;
}

.container {
  padding-bottom: var(--safe-area-bottom);
}

.content {
  font-size: 30rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
  margin: 32rpx;
  padding-bottom: 42rpx;

  .num_text {
    color: #7C807F;
    display: flex;
    font-size: 26rpx;
    margin-top: 16rpx;
    margin-right: 32rpx;
    border-bottom: 1rpx solid #E6E6E6;
    padding-bottom: 40rpx;
  }

  .evaluate_text {
    color: #7C807F;
    font-size: 26rpx;
    margin-top: 16rpx;
    margin-bottom: 32rpx;
  }

  .textarea {
    width: 558rpx;
    height: 622rpx;
    background-color: #F5F6F7;
    font-size: 30rpx;
    padding: 32rpx 32rpx 0 32rpx;
    border-radius: 16rpx;
  }
}

.act_img {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
}

.btn_box {
  width: 686rpx;
  margin-top: 40rpx;
  margin-left: 32rpx;
}
</style>